<template>
	<view class="tab_bar">
		<u-tabbar
			:value="value"
			@change="change"
			:fixed="true"
			:placeholder="true"
			:safeAreaInsetBottom="true"
			
		>
			<u-tabbar-item text="首页">
			<!-- 	<image
					class="u-page__item__slot-icon"
					slot="active-icon"
					src="/static/img/tabbar/shouye-active.png"
				></image> -->
				<image
					class="u-page__item__slot-icon"
					slot="inactive-icon"
					src="/static/img/tabbar/shouye-active.png"
				></image>
			</u-tabbar-item>
			
			<u-tabbar-item text="运动">
				<!-- <image
					class="u-page__item__slot-icon"
					slot="active-icon"
					src="/static/img/tabbar/yundong-active.png"
				></image> -->
				<image
					class="u-page__item__slot-icon"
					slot="inactive-icon"
					src="/static/img/tabbar/yundong-active.png"
				></image>
			</u-tabbar-item>
			
			<u-tabbar-item text="我的">
				<!-- <image
					class="u-page__item__slot-icon"
					slot="active-icon"
					src="/static/img/tabbar/woded-active.png"
				></image> -->
				<image
					class="u-page__item__slot-icon"
					slot="inactive-icon"
					src="/static/img/tabbar/woded-active.png"
				></image>
			</u-tabbar-item>
		</u-tabbar>
	</view>
</template>

<script>
	export default {
		name:"TabBar",
		data() {
			return {
				value: ""
			};
		},
		methods: {
			change(val) {
				this.value = val;
				
				let url = "";
				if(val == 0) {
					url = '/pages/index/index'
				} else if (val == 1) {
					url = '/pages/motion/motion'
				} else {
					url = '/pages/profile/profile'
				}
				uni.switchTab({
					url
				})
			}
		}
	}
</script>

<style lang="scss">
::v-deep .u-page__item__slot-icon, .u-page__item__slot-icon {
	width: 20px;
	height: 20px;
}

::v-deep .u-tabbar-item .u-tabbar-item__text:nth-child(2) {
	color: #24B6A8;
}

</style>